<div id="test-cases">
  <.card title={gettext("Analytics")} icon="chart_arcs" data-part="analytics">
    <:actions>
      <.dropdown
        id="test-cases-analytics-environment-dropdown"
        label={@analytics_environment_label}
        secondary_text={gettext("Environment:")}
      >
        <.dropdown_item
          value="any"
          label="Any"
          patch={"?#{Query.put(@uri.query, "analytics_environment", "any")}"}
          data-selected={@analytics_environment == "any"}
        >
          <:right_icon><.check /></:right_icon>
        </.dropdown_item>
        <.dropdown_item
          value="local"
          label="Local"
          patch={"?#{Query.put(@uri.query, "analytics_environment", "local")}"}
          data-selected={@analytics_environment == "local"}
        >
          <:right_icon><.check /></:right_icon>
        </.dropdown_item>
        <.dropdown_item
          value="ci"
          label="CI"
          patch={"?#{Query.put(@uri.query, "analytics_environment", "ci")}"}
          data-selected={@analytics_environment == "ci"}
        >
          <:right_icon><.check /></:right_icon>
        </.dropdown_item>
      </.dropdown>
      <.button_group size="large">
        <.button_group_item
          patch={"?#{Query.put(@uri.query, "analytics_date_range", "last_7_days")}"}
          label={gettext("7 days")}
          data-selected={@analytics_date_range == "last_7_days"}
        />
        <.button_group_item
          patch={"?#{Query.put(@uri.query, "analytics_date_range", "last_30_days")}"}
          label={gettext("30 days")}
          data-selected={@analytics_date_range == "last_30_days"}
        />
        <.button_group_item
          patch={"?#{Query.put(@uri.query, "analytics_date_range", "last_12_months")}"}
          label={gettext("12 months")}
          data-selected={@analytics_date_range == "last_12_months"}
        />
      </.button_group>
    </:actions>
    <div data-part="widgets">
      <.widget
        title={gettext("Test case runs")}
        description={
          gettext(
            "Test case runs represents the total number of individual test case executions during a given period."
          )
        }
        value={Number.Delimit.number_to_delimited(@test_case_runs_analytics.count, precision: 0)}
        id="widget-test-case-run-count"
        trend_value={@test_case_runs_analytics.trend}
        trend_type={:neutral}
        trend_label={@analytics_trend_label}
        phx_click="select_widget"
        phx_value_widget="test_case_run_count"
        selected={@analytics_selected_widget == "test_case_run_count"}
        empty={@test_case_runs_analytics.count == 0}
      />
      <.widget
        title={gettext("Failed test case runs")}
        description={
          gettext(
            "Failed test case runs represents the number of individual test case executions that failed during a given period."
          )
        }
        value={
          Number.Delimit.number_to_delimited(@failed_test_case_runs_analytics.count, precision: 0)
        }
        id="widget-failed-test-case-run-count"
        trend_value={@failed_test_case_runs_analytics.trend}
        trend_label={@analytics_trend_label}
        trend_type={:inverse}
        phx_click="select_widget"
        phx_value_widget="failed_test_case_run_count"
        selected={@analytics_selected_widget == "failed_test_case_run_count"}
        empty={@test_case_runs_analytics.count == 0}
      />
      <.percentile_dropdown_widget
        id="widget-test-case-run-duration"
        title={
          case @selected_duration_type do
            "avg" -> gettext("Avg. test case run duration")
            "p99" -> gettext("p99 test case run duration")
            "p90" -> gettext("p90 test case run duration")
            "p50" -> gettext("p50 test case run duration")
          end
        }
        legend_color={
          case @selected_duration_type do
            "p99" -> "p99"
            "p90" -> "p90"
            "p50" -> "p50"
            _ -> "primary"
          end
        }
        description={
          gettext("Average duration of individual test case executions during a given period.")
        }
        value={
          Tuist.Utilities.DateFormatter.format_duration_from_milliseconds(
            case @selected_duration_type do
              "avg" -> @test_case_runs_duration_analytics.total_average_duration
              "p99" -> @test_case_runs_duration_analytics.p99
              "p90" -> @test_case_runs_duration_analytics.p90
              "p50" -> @test_case_runs_duration_analytics.p50
            end
          )
        }
        metrics={
          %{
            avg:
              Tuist.Utilities.DateFormatter.format_duration_from_milliseconds(
                @test_case_runs_duration_analytics.total_average_duration
              ),
            p99:
              Tuist.Utilities.DateFormatter.format_duration_from_milliseconds(
                @test_case_runs_duration_analytics.p99
              ),
            p90:
              Tuist.Utilities.DateFormatter.format_duration_from_milliseconds(
                @test_case_runs_duration_analytics.p90
              ),
            p50:
              Tuist.Utilities.DateFormatter.format_duration_from_milliseconds(
                @test_case_runs_duration_analytics.p50
              )
          }
        }
        selected_type={@selected_duration_type}
        event_name="select_duration_type"
        trend_value={@test_case_runs_duration_analytics.trend}
        trend_label={@analytics_trend_label}
        trend_type={:inverse}
        phx_click="select_widget"
        phx_value_widget="test_case_run_duration"
        selected={@analytics_selected_widget == "test_case_run_duration"}
        empty={@test_case_runs_analytics.count == 0}
        empty_label={gettext("No data")}
      />
    </div>
    <.card_section :if={@test_case_runs_analytics.count != 0}>
      <div data-part="analytics-chart">
        <.chart
          :if={@analytics_selected_widget != "test_case_run_duration"}
          id="test-cases-analytics-chart"
          type="line"
          extra_options={
            %{
              grid: %{
                width: "93%",
                left: "0.4%",
                right: "7%",
                height: "88%",
                top: "5%"
              },
              xAxis: %{
                boundaryGap: false,
                type: "category",
                axisLabel: %{
                  color: "var:noora-surface-label-secondary",
                  formatter: "fn:toLocaleDate",
                  customValues: [
                    @analytics_chart_data.dates |> List.first(),
                    @analytics_chart_data.dates |> List.last()
                  ],
                  padding: [10, 0, 0, 0]
                }
              },
              yAxis: %{
                splitLine: %{
                  lineStyle: %{
                    color: "var:noora-chart-lines"
                  }
                },
                axisLabel: %{
                  color: "var:noora-surface-label-secondary",
                  formatter: @analytics_chart_data.value_formatter
                }
              },
              tooltip: %{
                valueFormat: @analytics_chart_data.value_formatter
              },
              legend: %{
                show: false
              }
            }
          }
          series={[
            %{
              data:
                Enum.zip(
                  @analytics_chart_data.dates,
                  @analytics_chart_data.values
                )
                |> Enum.map(&Tuple.to_list/1),
              name: @analytics_chart_data.name,
              type: "line",
              smooth: 0.1,
              symbol: "none"
            }
          ]}
          y_axis_min={0}
        />
        <.chart
          :if={@analytics_selected_widget == "test_case_run_duration"}
          id="test-cases-duration-analytics-chart"
          type="line"
          extra_options={
            %{
              legend: %{
                left: "left",
                top: "bottom",
                orient: "horizontal",
                textStyle: %{
                  color: "var:noora-surface-label-secondary",
                  fontFamily: "monospace",
                  fontWeight: 400,
                  fontSize: 10,
                  lineHeight: 12
                },
                icon:
                  "path://M0 6C0 4.89543 0.895431 4 2 4H6C7.10457 4 8 4.89543 8 6C8 7.10457 7.10457 8 6 8H2C0.895431 8 0 7.10457 0 6Z",
                itemWidth: 8,
                itemHeight: 4
              },
              grid: %{
                width: "93%",
                left: "0.4%",
                right: "7%",
                height: "60%",
                top: "10%"
              },
              xAxis: %{
                boundaryGap: false,
                type: "category",
                axisLabel: %{
                  color: "var:noora-surface-label-secondary",
                  formatter: "fn:toLocaleDate",
                  customValues: [
                    @test_case_runs_duration_analytics.dates |> List.first(),
                    @test_case_runs_duration_analytics.dates |> List.last()
                  ],
                  padding: [10, 0, 0, 0]
                }
              },
              yAxis: %{
                splitNumber: 4,
                splitLine: %{
                  lineStyle: %{
                    color: "var:noora-chart-lines"
                  }
                },
                axisLabel: %{
                  color: "var:noora-surface-label-secondary",
                  formatter: "fn:formatMilliseconds"
                }
              },
              tooltip: %{
                valueFormat: "fn:formatMilliseconds"
              }
            }
          }
          series={[
            %{
              color: "var:noora-chart-secondary",
              data:
                Enum.zip(
                  @test_case_runs_duration_analytics.dates,
                  @test_case_runs_duration_analytics.values
                )
                |> Enum.map(&Tuple.to_list/1),
              name: gettext("Average"),
              type: "line",
              smooth: 0.1,
              symbol: "none"
            },
            %{
              color: "var:noora-chart-p99",
              data:
                Enum.zip(
                  @test_case_runs_duration_analytics.dates,
                  @test_case_runs_duration_analytics.p99_values
                )
                |> Enum.map(&Tuple.to_list/1),
              name: gettext("p99"),
              type: "line",
              smooth: 0.1,
              symbol: "none"
            },
            %{
              color: "var:noora-chart-p90",
              data:
                Enum.zip(
                  @test_case_runs_duration_analytics.dates,
                  @test_case_runs_duration_analytics.p90_values
                )
                |> Enum.map(&Tuple.to_list/1),
              name: gettext("p90"),
              type: "line",
              smooth: 0.1,
              symbol: "none"
            },
            %{
              color: "var:noora-chart-p50",
              data:
                Enum.zip(
                  @test_case_runs_duration_analytics.dates,
                  @test_case_runs_duration_analytics.p50_values
                )
                |> Enum.map(&Tuple.to_list/1),
              name: gettext("p50"),
              type: "line",
              smooth: 0.1,
              symbol: "none"
            }
          ]}
          y_axis_min={0}
        />
      </div>
    </.card_section>
    <.empty_card_section :if={@test_case_runs_analytics.count == 0} title={gettext("No data yet")}>
      <:image>
        <img src="/images/empty_line_chart_light.png" data-theme="light" />
        <img src="/images/empty_line_chart_dark.png" data-theme="dark" />
      </:image>
    </.empty_card_section>
  </.card>
  <.card title={gettext("Test Cases")} icon="exchange" data-part="test-cases">
    <.card_section data-part="test-cases-section">
      <div data-part="filters">
        <.form for={%{}} phx-change="search-test-cases" phx-debounce="200">
          <.text_input
            type="search"
            id="search-test-cases"
            name="search"
            placeholder={gettext("Search...")}
            show_suffix={false}
            data-part="search"
            value={@test_cases_filter}
          />
        </.form>
        <.dropdown
          id="test-cases-sort-by"
          label={
            case @test_cases_sort_by do
              "name" -> gettext("Test Case")
              "avg_duration" -> gettext("Avg. duration")
              _ -> gettext("Last ran at")
            end
          }
          secondary_text={gettext("Sort by:")}
        >
          <.dropdown_item
            value="last_ran_at"
            label={gettext("Last ran at")}
            patch={sort_by_patch(@uri, "last_ran_at")}
            data-selected={@test_cases_sort_by == "last_ran_at"}
          >
            <:right_icon><.check /></:right_icon>
          </.dropdown_item>
          <.dropdown_item
            value="name"
            label={gettext("Test Case")}
            patch={sort_by_patch(@uri, "name")}
            data-selected={@test_cases_sort_by == "name"}
          >
            <:right_icon><.check /></:right_icon>
          </.dropdown_item>
          <.dropdown_item
            value="avg_duration"
            label={gettext("Avg. duration")}
            patch={sort_by_patch(@uri, "avg_duration")}
            data-selected={@test_cases_sort_by == "avg_duration"}
          >
            <:right_icon><.check /></:right_icon>
          </.dropdown_item>
        </.dropdown>
        <.filter_dropdown
          id="filter-dropdown"
          label={gettext("Filter")}
          available_filters={@available_filters}
          active_filters={@active_filters}
        />
      </div>
      <div :if={Enum.any?(@active_filters)} data-part="active-filters">
        <.active_filter :for={filter <- @active_filters} filter={filter} />
      </div>

      <div :if={not Enum.empty?(@test_cases)} data-part="test-cases-table">
        <.table
          id="test-cases-table"
          rows={@test_cases}
          row_navigate={
            fn test_case ->
              url(
                ~p"/#{@selected_project.account.name}/#{@selected_project.name}/tests/test-cases/#{test_case.id}"
              )
            end
          }
        >
          <:col
            :let={test_case}
            label={gettext("Test Case")}
            patch={
              @test_cases_sort_by == "name" &&
                column_sort_patch(assigns, "name")
            }
            icon={
              @test_cases_sort_by == "name" &&
                sort_icon(@test_cases_sort_order)
            }
          >
            <.text_and_description_cell
              label={test_case.name}
              description={
                case {test_case.module_name, test_case.suite_name} do
                  {module_name, suite_name} when module_name != "" and suite_name != "" ->
                    "#{module_name} \u2022 #{suite_name}"

                  {module_name, _} when module_name != "" ->
                    module_name

                  _ ->
                    nil
                end
              }
            />
          </:col>
          <:col
            :let={test_case}
            label={gettext("Avg. duration")}
            patch={
              @test_cases_sort_by == "avg_duration" &&
                column_sort_patch(assigns, "avg_duration")
            }
            icon={
              @test_cases_sort_by == "avg_duration" &&
                sort_icon(@test_cases_sort_order)
            }
          >
            <.text_cell
              label={
                Tuist.Utilities.DateFormatter.format_duration_from_milliseconds(
                  test_case.avg_duration
                )
              }
              icon="history"
            />
          </:col>
          <:col :let={test_case} label={gettext("Last status")}>
            <%= case test_case.last_status do %>
              <% "success" -> %>
                <.status_badge_cell label={gettext("Passed")} status="success" />
              <% "failure" -> %>
                <.status_badge_cell label={gettext("Failed")} status="error" />
              <% "skipped" -> %>
                <.status_badge_cell label={gettext("Skipped")} status="warning" />
            <% end %>
          </:col>
          <:col
            :let={test_case}
            label={gettext("Last ran at")}
            patch={
              @test_cases_sort_by == "last_ran_at" &&
                column_sort_patch(assigns, "last_ran_at")
            }
            icon={
              @test_cases_sort_by == "last_ran_at" &&
                sort_icon(@test_cases_sort_order)
            }
          >
            <.text_cell sublabel={Tuist.Utilities.DateFormatter.from_now(test_case.last_ran_at)} />
          </:col>
        </.table>
        <.pagination_group
          :if={@test_cases_meta.total_pages > 1}
          current_page={@test_cases_page}
          number_of_pages={@test_cases_meta.total_pages}
          page_patch={
            fn page ->
              "?#{Query.put(@uri.query, "page", page)}"
            end
          }
        />
      </div>

      <div :if={Enum.empty?(@test_cases)} data-part="empty-test-cases">
        <.empty_card_section
          title={gettext("No data yet")}
          get_started_href="https://docs.tuist.dev/en/guides/features/insights#tests"
          data-part="empty-test-cases-table-card-section"
        >
          <:image>
            <img src="/images/empty_table_light.png" data-theme="light" />
            <img src="/images/empty_table_dark.png" data-theme="dark" />
          </:image>
        </.empty_card_section>
      </div>
    </.card_section>
  </.card>
</div>
